<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'BoundingSphere',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addBoundingBox();
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addBoundingBox() {
                //包围球的坐标点
                let degrees = [
                    [
                        110.17433166503905,
                        31.433057322713815
                    ],
                    [
                        110.13656616210938,
                        31.400242284667453
                    ],
                    [
                        110.13656616210938,
                        31.38529591963515
                    ],
                    [
                        110.23029327392578,
                        31.37005403926066
                    ],
                    [
                        110.2811050415039,
                        31.39643265286174
                    ],
                    [
                        110.21965026855469,
                        31.435400814686723
                    ],
                    [
                        110.17433166503905,
                        31.433057322713815
                    ]
                ];
                //压平数组
                let anies = degrees.flat(2);
                //构建多边形几何体
                const positions = Cesium.Cartesian3.fromDegreesArray(anies);
                let polygon1 = new Cesium.PolygonGeometry({
                    polygonHierarchy: new Cesium.PolygonHierarchy(positions)
                });
                let geometry1 = Cesium.PolygonGeometry.createGeometry(polygon1);

                //构建多边形的实例
                let polygon = new Cesium.GeometryInstance({
                    geometry: geometry1,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
                    },
                    id: 'polygonInstance1'
                });
                // Cesium.BoundingSphere.fromPoints()
                //用前面多有的点坐标构建包围球
                let boundingSphere1 = Cesium.BoundingSphere.fromPoints(positions);
                let radius = boundingSphere1.radius;
                let center = boundingSphere1.center;
                //构建球体的几何体
                let sphere1 = new Cesium.SphereGeometry({
                    radius: radius,
                    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                });
                let sphereGeometry1 = Cesium.SphereGeometry.createGeometry(sphere1);

                //构建球体的几何实例
                let sphereInstance1 = new Cesium.GeometryInstance({
                    geometry: sphereGeometry1,
                    modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
                        center), Cesium.Cartesian3.ZERO, new Cesium.Matrix4()),
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
                    }
                });
                //Cesium.BoundingSphere.fromCornerPoints()


                //new Cesium.BoundingSphere()

                //构建图元
                let primitive = new Cesium.Primitive({
                    geometryInstances: [polygon, sphereInstance1],
                    asynchronous: false,//是否采用多线程
                    appearance: new Cesium.PerInstanceColorAppearance({
                        translucent: true,
                        closed: true
                    })
                });

                this.viewer.scene.primitives.add(primitive);
                //定位到包围球
                this.viewer.camera.flyToBoundingSphere(boundingSphere1, {
                    offset: {
                        heading: Cesium.Math.toRadians(20.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        range: 50000
                    }
                })

            }

        }

    }
</script>

